<template>
  <div class="simple-title-draw">
    <!-- 模式选择 -->
    <div class="draw-mode-section">
      <el-radio-group v-model="currentMode" size="small" @change="onModeChange">
        <el-radio-button label="pixel">像素坐标</el-radio-button>
        <el-radio-button label="world">世界坐标</el-radio-button>
      </el-radio-group>
    </div>

    <!-- 基本参数 -->
    <div class="basic-params">
      <!-- 图层名称 -->
      <div class="param-group">
        <label>图层名称:</label>
        <el-input
          v-model="params.LayerName"
          size="small"
          placeholder="输入图层名称"
          maxlength="20"
        />
      </div>

      <!-- 标题文本 -->
      <div class="param-group">
        <label>标题文本:</label>
        <el-input
          v-model="params.Title"
          size="small"
          placeholder="输入标题文本"
          maxlength="30"
        />
      </div>

      <!-- 坐标输入 -->
      <div class="param-group">
        <label>{{ currentMode === "pixel" ? "屏幕坐标:" : "世界坐标:" }}</label>

        <!-- 像素坐标 -->
        <div v-if="currentMode === 'pixel'" class="coord-inputs">
          <el-input-number
            v-model="coordinates.pixelX"
            size="small"
            placeholder="X坐标"
            :min="0"
            :max="9999"
            style="width: 48%; margin-right: 4%"
            ref="pixelXInput"
          />
          <el-input-number
            v-model="coordinates.pixelY"
            size="small"
            placeholder="Y坐标"
            :min="0"
            :max="9999"
            style="width: 48%"
            ref="pixelYInput"
          />
        </div>

        <!-- 世界坐标 -->
        <div v-else class="coord-inputs">
          <el-input-number
            v-model="coordinates.longitude"
            size="small"
            placeholder="经度"
            :min="-180"
            :max="180"
            :precision="6"
            style="width: 100%; margin-bottom: 8px"
            ref="longitudeInput"
          />
          <el-input-number
            v-model="coordinates.latitude"
            size="small"
            placeholder="纬度"
            :min="-90"
            :max="90"
            :precision="6"
            style="width: 100%; margin-bottom: 8px"
            ref="latitudeInput"
          />
          <el-input-number
            v-model="coordinates.altitude"
            size="small"
            placeholder="高度"
            :precision="2"
            style="width: 100%"
            ref="altitudeInput"
          />
        </div>

        <!-- 地图选点按钮 -->
        <el-button
          size="small"
          type="primary"
          plain
          @click="startPickPosition"
          :loading="isPicking"
          style="width: 100%; margin-top: 8px"
        >
          <i class="el-icon-location"></i>
          {{ isPicking ? "请在地图上点击选择位置..." : "📍 从地图选择位置" }}
        </el-button>
      </div>

      <!-- 字体设置 -->
      <div class="param-group">
        <label>字体大小:</label>
        <el-input-number
          v-model="params.Font.FontSize"
          size="small"
          :min="8"
          :max="72"
          style="width: 70%"
        />
        <span style="margin-left: 8px; color: #666">px</span>
      </div>

      <!-- 颜色设置 -->
      <div class="param-group">
        <label>文字颜色:</label>
        <el-color-picker
          v-model="fontColor"
          size="small"
          @change="onColorChange"
        />
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button
        type="primary"
        size="small"
        @click="drawTitle"
        :loading="isDrawing"
        :disabled="!canDraw"
        style="width: 100%; margin-bottom: 8px"
      >
        {{ isDrawing ? "绘制中..." : "🎨 绘制标题" }}
      </el-button>

      <div class="button-row">
        <el-button size="mini" @click="clearForm" style="width: 30%">
          🗑️ 清空
        </el-button>
        <el-button size="mini" @click="testCoords" style="width: 30%">
          🧪 测试
        </el-button>
        <el-button size="mini" @click="loadHistory" style="width: 30%">
          📋 历史
        </el-button>
      </div>
    </div>

    <!-- 状态信息 -->
    <div class="status-info" v-if="statusMessage">
      <div class="status-message" :class="statusType">
        {{ statusMessage }}
      </div>
    </div>

    <!-- 简单历史记录 -->
    <div class="history-section" v-if="titleHistory.length > 0">
      <div class="history-header">
        <span>历史记录 ({{ titleHistory.length }})</span>
        <el-button size="mini" type="text" @click="clearHistory"
          >清空</el-button
        >
      </div>
      <div class="history-list">
        <div
          v-for="(item, index) in titleHistory.slice(0, 3)"
          :key="index"
          class="history-item"
          @click="loadHistoryItem(item)"
        >
          <div class="history-title">{{ item.Title }}</div>
          <div class="history-coords">
            {{
              currentMode === "pixel"
                ? `${item.X}, ${item.Y}`
                : `${item.Longitude?.toFixed(3)}, ${item.Latitude?.toFixed(3)}`
            }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted, nextTick, watch } from "vue";
import { ElMessage } from "element-plus";

export default {
  name: "SimpleTitleDraw",

  props: {
    // 接收父组件传入的模式
    initialMode: {
      type: String,
      default: "world",
    },
  },

  emits: [
    "title-draw-request", // 请求绘制标题
    "start-position-pick", // 开始位置选择
    "stop-position-pick", // 停止位置选择
    "mode-changed", // 模式变化事件
  ],

  setup(props, { emit, expose }) {
    // 基础状态 - 使用props传入的初始模式
    const currentMode = ref(props.initialMode || "world");
    const isPicking = ref(false);
    const isDrawing = ref(false);
    const fontColor = ref("#FFFFFF");

    // 坐标数据 - 使用简单的响应式对象
    const coordinates = reactive({
      pixelX: 100,
      pixelY: 100,
      longitude: 116.397,
      latitude: 39.916,
      altitude: 0,
    });

    // 绘制参数
    const params = reactive({
      LayerName: "默认图层",
      Title: "",
      Font: {
        FontSize: 16,
        ForeColor: {
          A: 255,
          R: 255,
          G: 255,
          B: 255,
          hexColor: "#FFFFFF",
        },
      },
    });

    // 状态消息
    const statusMessage = ref("");
    const statusType = ref("info"); // info, success, warning, error

    // 历史记录
    const titleHistory = ref([]);

    // DOM引用
    const pixelXInput = ref(null);
    const pixelYInput = ref(null);
    const longitudeInput = ref(null);
    const latitudeInput = ref(null);
    const altitudeInput = ref(null);

    // 计算属性
    const canDraw = computed(() => {
      return params.LayerName.trim() && params.Title.trim();
    });

    // 方法
    const showStatus = (message, type = "info", duration = 3000) => {
      statusMessage.value = message;
      statusType.value = type;

      setTimeout(() => {
        statusMessage.value = "";
      }, duration);
    };

    const onModeChange = () => {
      console.log("🔄 模式切换到:", currentMode.value);
      showStatus(
        `已切换到${currentMode.value === "pixel" ? "像素" : "世界"}坐标模式`,
        "info"
      );
    };

    const onColorChange = (color) => {
      console.log("🎨 颜色变更:", color);
      if (color) {
        params.Font.ForeColor.hexColor = color;
        // 转换hex到RGB
        const hex = color.replace("#", "");
        params.Font.ForeColor.R = parseInt(hex.substr(0, 2), 16);
        params.Font.ForeColor.G = parseInt(hex.substr(2, 2), 16);
        params.Font.ForeColor.B = parseInt(hex.substr(4, 2), 16);
      }
    };

    const startPickPosition = () => {
      console.log("📍 开始选择位置, 模式:", currentMode.value);
      isPicking.value = true;
      emit("start-position-pick", currentMode.value);
      showStatus("请在地图上点击选择位置", "info");
    };

    const stopPickPosition = () => {
      console.log("⏹️ 停止选择位置");
      isPicking.value = false;
      emit("stop-position-pick");
    };

    // 最关键的方法：设置位置（直接操作DOM）
    const setPosition = (position) => {
      console.log("🎯 SimpleTitleDraw.setPosition 被调用");
      console.log("📥 接收位置数据:", position);
      console.log("📥 当前模式:", currentMode.value);
      console.log("📥 位置数据详细分析:", {
        hasPosition: !!position,
        positionType: typeof position,
        positionKeys: position ? Object.keys(position) : "null",
        isPixelData:
          position && (position.X !== undefined || position.x !== undefined),
        isWorldData:
          position &&
          (position.Longitude !== undefined ||
            position.longitude !== undefined),
      });

      if (!position || typeof position !== "object") {
        console.error("❌ 无效位置数据");
        showStatus("接收到无效的位置数据", "error");
        return false;
      }

      try {
        if (currentMode.value === "pixel") {
          // 像素坐标处理
          const newX = position.X ?? position.x ?? position.pixelX;
          const newY = position.Y ?? position.y ?? position.pixelY;

          console.log("🔍 像素坐标解析:", {
            newX,
            newY,
            originalPosition: position,
          });

          if (typeof newX === "number" && typeof newY === "number") {
            coordinates.pixelX = Math.round(newX);
            coordinates.pixelY = Math.round(newY);

            // 直接更新DOM输入框
            nextTick(() => {
              if (pixelXInput.value?.$refs?.input) {
                pixelXInput.value.$refs.input.value = coordinates.pixelX;
              }
              if (pixelYInput.value?.$refs?.input) {
                pixelYInput.value.$refs.input.value = coordinates.pixelY;
              }
            });

            console.log("✅ 像素坐标已更新:", {
              X: coordinates.pixelX,
              Y: coordinates.pixelY,
            });
            showStatus(
              `坐标已更新: (${coordinates.pixelX}, ${coordinates.pixelY})`,
              "success"
            );
            stopPickPosition();
            return true;
          } else {
            console.error("❌ 像素坐标数据无效:", {
              newX,
              newY,
              types: { x: typeof newX, y: typeof newY },
            });
            showStatus("像素坐标数据无效", "error");
          }
        } else {
          // 世界坐标处理
          const newLon =
            position.Longitude ??
            position.longitude ??
            position.lon ??
            position.lng;
          const newLat = position.Latitude ?? position.latitude ?? position.lat;
          const newAlt =
            position.Altitude ?? position.altitude ?? position.height ?? 0;

          console.log("🔍 世界坐标解析:", {
            newLon,
            newLat,
            newAlt,
            originalPosition: position,
            types: {
              lon: typeof newLon,
              lat: typeof newLat,
              alt: typeof newAlt,
            },
          });

          if (
            typeof newLon === "number" &&
            typeof newLat === "number" &&
            newLon >= -180 &&
            newLon <= 180 &&
            newLat >= -90 &&
            newLat <= 90
          ) {
            coordinates.longitude = Number(newLon.toFixed(6));
            coordinates.latitude = Number(newLat.toFixed(6));
            coordinates.altitude = Number(newAlt.toFixed(2));

            console.log("🔄 更新世界坐标数据:", {
              longitude: coordinates.longitude,
              latitude: coordinates.latitude,
              altitude: coordinates.altitude,
            });

            // 直接更新DOM输入框
            nextTick(() => {
              console.log("🔄 开始更新DOM输入框...");

              if (longitudeInput.value?.$refs?.input) {
                longitudeInput.value.$refs.input.value = coordinates.longitude;
                console.log("✅ 经度输入框已更新:", coordinates.longitude);
              } else {
                console.warn("⚠️ 经度输入框引用不可用");
              }

              if (latitudeInput.value?.$refs?.input) {
                latitudeInput.value.$refs.input.value = coordinates.latitude;
                console.log("✅ 纬度输入框已更新:", coordinates.latitude);
              } else {
                console.warn("⚠️ 纬度输入框引用不可用");
              }

              if (altitudeInput.value?.$refs?.input) {
                altitudeInput.value.$refs.input.value = coordinates.altitude;
                console.log("✅ 高度输入框已更新:", coordinates.altitude);
              } else {
                console.warn("⚠️ 高度输入框引用不可用");
              }
            });

            console.log("✅ 世界坐标已更新:", {
              Longitude: coordinates.longitude,
              Latitude: coordinates.latitude,
              Altitude: coordinates.altitude,
            });
            showStatus(
              `坐标已更新: (${coordinates.longitude}, ${coordinates.latitude})`,
              "success"
            );
            stopPickPosition();
            return true;
          } else {
            console.error("❌ 世界坐标数据格式错误或超出范围:", {
              newLon,
              newLat,
              newAlt,
              validLon:
                typeof newLon === "number" && newLon >= -180 && newLon <= 180,
              validLat:
                typeof newLat === "number" && newLat >= -90 && newLat <= 90,
            });
            showStatus("世界坐标数据格式错误或超出范围", "error");
          }
        }

        console.error("❌ 坐标数据格式错误或超出范围");
        showStatus("坐标数据格式错误或超出范围", "error");
        return false;
      } catch (error) {
        console.error("❌ setPosition 异常:", error);
        showStatus(`位置更新失败: ${error.message}`, "error");
        return false;
      }
    };

    const drawTitle = () => {
      if (!canDraw.value) {
        showStKeyValueatus("请填写完整的图层名称和标题文本", "warning");
        return;
      }

      isDrawing.value = true;

      try {
        // 构建绘制数据
        const drawData = {
          mode: currentMode.value,
          params: {
            ...params,
            KeyValue: `001_${Date.now()}`,
            // KeyValue: `type=title&source=user&id=${Date.now()}_${Math.random()
            //   .toString(36)
            //   .substr(2, 6)}`,
            // KeyValue: `type=title&source=user&id=${Date.now()}_${Math.random()
            //   .toString(36)
            //   .substr(2, 6)}`,
            // KeyValue: `${Math.floor(Date.now() / 1000)}_${Math.random()
            //   .toString(36)
            //   .substr(2, 4)}`,
            Position:
              currentMode.value === "pixel"
                ? {
                    X: coordinates.pixelX,
                    Y: coordinates.pixelY,
                  }
                : {
                    Longitude: coordinates.longitude,
                    Latitude: coordinates.latitude,
                    Altitude: coordinates.altitude,
                  },
          },
        };
        console.log("🎨 绘制数据:", drawData);

        console.log("🎨 发送绘制请求:", drawData);
        emit("title-draw-request", drawData);

        // 添加到历史记录
        const historyItem = {
          ...params,
          ...coordinates,
          timestamp: Date.now(),
        };
        titleHistory.value.unshift(historyItem);
        if (titleHistory.value.length > 10) {
          titleHistory.value = titleHistory.value.slice(0, 10);
        }

        showStatus("标题绘制请求已发送", "success");
      } catch (error) {
        console.error("❌ 绘制失败:", error);
        showStatus(`绘制失败: ${error.message}`, "error");
      } finally {
        setTimeout(() => {
          isDrawing.value = false;
        }, 1000);
      }
    };

    const clearForm = () => {
      params.LayerName = "默认图层";
      params.Title = "";
      coordinates.pixelX = 100;
      coordinates.pixelY = 100;
      coordinates.longitude = 116.397;
      coordinates.latitude = 39.916;
      coordinates.altitude = 0;
      showStatus("表单已清空", "info");
    };

    const testCoords = () => {
      console.log("🧪 测试坐标更新");
      console.log("🧪 当前状态:", {
        currentMode: currentMode.value,
        coordinates: coordinates,
        inputRefs: {
          pixelX: !!pixelXInput.value,
          pixelY: !!pixelYInput.value,
          longitude: !!longitudeInput.value,
          latitude: !!latitudeInput.value,
          altitude: !!altitudeInput.value,
        },
      });

      if (currentMode.value === "pixel") {
        const testPos = {
          X: Math.floor(Math.random() * 800) + 100,
          Y: Math.floor(Math.random() * 600) + 100,
        };
        console.log("🧪 测试像素坐标:", testPos);
        const result = setPosition(testPos);
        console.log("🧪 像素坐标测试结果:", result);
      } else {
        const testPos = {
          Longitude: Number((Math.random() * 360 - 180).toFixed(6)),
          Latitude: Number((Math.random() * 180 - 90).toFixed(6)),
          Altitude: Number((Math.random() * 1000).toFixed(2)),
        };
        console.log("🧪 测试世界坐标:", testPos);
        const result = setPosition(testPos);
        console.log("🧪 世界坐标测试结果:", result);

        // 验证更新是否成功
        setTimeout(() => {
          console.log("🔍 测试后验证状态:", {
            coordinates: coordinates,
            inputValues: {
              longitude: longitudeInput.value?.$refs?.input?.value,
              latitude: latitudeInput.value?.$refs?.input?.value,
              altitude: altitudeInput.value?.$refs?.input?.value,
            },
          });
        }, 1000);
      }
    };

    const loadHistory = () => {
      showStatus(`当前有 ${titleHistory.value.length} 条历史记录`, "info");
    };

    const clearHistory = () => {
      titleHistory.value = [];
      showStatus("历史记录已清空", "info");
    };

    const loadHistoryItem = (item) => {
      params.LayerName = item.LayerName || "默认图层";
      params.Title = item.Title || "";
      params.Font.FontSize = item.Font?.FontSize || 16;

      if (currentMode.value === "pixel") {
        coordinates.pixelX = item.pixelX || 100;
        coordinates.pixelY = item.pixelY || 100;
      } else {
        coordinates.longitude = item.longitude || 116.397;
        coordinates.latitude = item.latitude || 39.916;
        coordinates.altitude = item.altitude || 0;
      }

      showStatus("历史记录已加载", "success");
    };

    // 更新模式的方法
    const updateMode = (newMode) => {
      console.log("🔄 外部调用更新模式:", {
        old: currentMode.value,
        new: newMode,
      });
      if (newMode && newMode !== currentMode.value) {
        currentMode.value = newMode;
        showStatus(
          `模式已切换为: ${newMode === "pixel" ? "像素" : "世界"}坐标`,
          "info"
        );

        // 发送模式变化事件给父组件
        emit("mode-changed", newMode);
        console.log("📤 已发送模式变化事件:", newMode);

        return true;
      }
      return false;
    };

    // 监听currentMode变化，自动发送事件
    watch(
      currentMode,
      (newMode) => {
        console.log("👀 子组件模式变化监听:", newMode);
        emit("mode-changed", newMode);
      },
      { immediate: true }
    );

    // 获取当前模式的方法（用于调试）
    const getCurrentMode = () => {
      console.log("🔍 getCurrentMode被调用:", currentMode.value);
      return currentMode.value;
    };

    // 组件挂载
    onMounted(() => {
      console.log("🎉 SimpleTitleDraw 组件已挂载");
      console.log("🔍 初始状态:", {
        initialMode: props.initialMode,
        currentMode: currentMode.value,
        coordinates: coordinates,
      });
      showStatus("标题绘制工具已准备就绪", "success", 2000);
    });

    // 监听props变化，同步模式
    watch(
      () => props.initialMode,
      (newMode) => {
        if (newMode && newMode !== currentMode.value) {
          console.log("🔄 同步模式变化:", {
            old: currentMode.value,
            new: newMode,
          });
          currentMode.value = newMode;
          showStatus(
            `模式已同步为: ${newMode === "pixel" ? "像素" : "世界"}坐标`,
            "info"
          );
        }
      }
    );

    // 对外暴露方法
    expose({
      currentMode,
      isPicking,
      isDrawing,
      fontColor,
      coordinates,
      params,
      statusMessage,
      statusType,
      titleHistory,
      pixelXInput,
      pixelYInput,
      longitudeInput,
      latitudeInput,
      altitudeInput,
      canDraw,
      onModeChange,
      onColorChange,
      startPickPosition,
      stopPickPosition,
      setPosition,
      drawTitle,
      clearForm,
      testCoords,
      loadHistory,
      clearHistory,
      loadHistoryItem,
      showStatus,
      updateMode,
      getCurrentMode,
    });

    // 返回模板使用的数据和方法
    return {
      currentMode,
      isPicking,
      isDrawing,
      fontColor,
      coordinates,
      params,
      statusMessage,
      statusType,
      titleHistory,
      pixelXInput,
      pixelYInput,
      longitudeInput,
      latitudeInput,
      altitudeInput,
      canDraw,
      onModeChange,
      onColorChange,
      startPickPosition,
      stopPickPosition,
      setPosition,
      drawTitle,
      clearForm,
      testCoords,
      loadHistory,
      clearHistory,
      loadHistoryItem,
      showStatus,
      updateMode,
      getCurrentMode,
    };
  },
};
</script>

<style scoped>
.simple-title-draw {
  width: 350px;
  padding: 20px;
  background: linear-gradient(
    135deg,
    rgba(15, 25, 55, 0.95),
    rgba(25, 35, 75, 0.92)
  );
  border: 2px solid rgba(64, 158, 255, 0.6);
  border-radius: 15px;
  backdrop-filter: blur(15px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(64, 158, 255, 0.2);
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
}

.draw-mode-section {
  margin-bottom: 20px;
  text-align: center;
}

.basic-params {
  margin-bottom: 20px;
}

.param-group {
  margin-bottom: 16px;
}

.param-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #e3f2fd;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.coord-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.action-buttons {
  margin-bottom: 16px;
}

.button-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.status-info {
  margin-bottom: 16px;
}

.status-message {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.status-message.info {
  background: rgba(64, 158, 255, 0.2);
  color: #81d4fa;
  border: 1px solid rgba(64, 158, 255, 0.4);
}

.status-message.success {
  background: rgba(76, 175, 80, 0.2);
  color: #a5d6a7;
  border: 1px solid rgba(76, 175, 80, 0.4);
}

.status-message.warning {
  background: rgba(255, 152, 0, 0.2);
  color: #ffcc02;
  border: 1px solid rgba(255, 152, 0, 0.4);
}

.status-message.error {
  background: rgba(244, 67, 54, 0.2);
  color: #ef9a9a;
  border: 1px solid rgba(244, 67, 54, 0.4);
}

.history-section {
  border-top: 1px solid rgba(64, 158, 255, 0.3);
  padding-top: 16px;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #e3f2fd;
}

.history-list {
  max-height: 120px;
  overflow-y: auto;
}

.history-item {
  padding: 8px 12px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(64, 158, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.history-item:hover {
  background: rgba(64, 158, 255, 0.15);
  border-color: rgba(64, 158, 255, 0.4);
}

.history-title {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.history-coords {
  font-size: 11px;
  color: #b3e5fc;
}

/* Element UI 样式覆盖 */
:deep(.el-input__inner) {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(64, 158, 255, 0.4) !important;
  color: #333 !important;
  border-radius: 6px !important;
}

:deep(.el-input__inner:focus) {
  border-color: #409eff !important;
  box-shadow: 0 0 8px rgba(64, 158, 255, 0.3) !important;
}

:deep(.el-input-number .el-input__inner) {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(64, 158, 255, 0.4) !important;
  color: #333 !important;
  text-align: center !important;
}

:deep(.el-radio-button__inner) {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(64, 158, 255, 0.4) !important;
  color: #e3f2fd !important;
}

:deep(.el-radio-button__original:checked + .el-radio-button__inner) {
  background: linear-gradient(135deg, #409eff, #79bbff) !important;
  border-color: #409eff !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.4) !important;
}

:deep(.el-button) {
  border-radius: 8px !important;
  font-weight: 600 !important;
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #409eff, #79bbff) !important;
  border-color: #409eff !important;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3) !important;
}

:deep(.el-button--primary:hover) {
  background: linear-gradient(135deg, #5dade2, #85c1e9) !important;
}

:deep(.el-color-picker__trigger) {
  border: 1px solid rgba(64, 158, 255, 0.4) !important;
  border-radius: 6px !important;
}
</style> 